<template>
  <div class="realtor_website">
    <div>
      <title-go-back :title="title"></title-go-back>
    </div>
    <div class="top_background">
      <div></div>
      <div></div>
      <div class="top_content">
        <div>
          <div class="logo_name">
            <img :src="adviserWebsiteData.photo" alt="">
            <div>
              <div class="name">
                <div>{{adviserWebsiteData.account}}</div>
                <div>
                  <praise-stars :starsNumber="starsNumber"></praise-stars>
                </div>
              </div>
              <div>
                所属公司 <span>{{adviserWebsiteData.company_id}}</span>
              </div>
              <div>
                主营范围 <span>{{adviserWebsiteData.city_code}}</span>
              </div>
            </div>
          </div>
        </div>
        <div>
        </div>
      </div>
    </div>
    <div class="brief_introduction">
      <div>
        <div>服务态度</div>
        <div>{{adviserWebsiteData.attitude}}%</div>
      </div>
      <div>
        <div>房源质量</div>
        <div>{{adviserWebsiteData.quality}}%</div>
      </div>
      <div>
        <div>用户好评</div>
        <div>{{adviserWebsiteData.evaluate}}</div>
      </div>
    </div>
    <div class="house_evaluate">
      <div class="house_evaluate_title">
        <!--:class="{border_bottom:borderBottom === 1}"-->
        <div @click="changeMoreHouse" :class="{border_bottom:borderBottom === 1}">
          <div>
            <div>{{houseList.total}}</div>
            <div>TA的在售房源</div>
          </div>
        </div>
        <div style="line-height: 40px;color: #999">
          <div>|</div>
        </div>
        <div @click="changeMoreEvaluate" :class="{border_bottom:borderBottom === 2}">
          <div>
            <div>0</div>
            <div>TA的在租房源</div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="borderBottom === 1">
      <list-content v-if="houseList.data" :houseListData="houseList.data"></list-content>
      <div v-show="houseList.last_page !== 0">
        <div class="btnLoadMore" v-show="page !== houseList.last_page" @click="loadMore">
          点击加载更多
        </div>
      </div>
    </div>
    <div v-if="borderBottom === 2">
      <div class="border_bottom_two">该经纪人暂无出租房源</div>
    </div>

  </div>
</template>

<script>
  import TitleGoBack from '../../components/common/TitleGoBack';
  import PraiseStars from '../../components/common/PraiseStars';
  import ListContent from '../../components/listComponents/ListContent';
import {adviserWebsite} from '../../axios/api';

  export default {
    name: 'RealtorWebsite',
    data() {
      return {
        title: '经纪人主页',
        starsNumber: 5,
        borderBottom:1,
        adviserWebsiteData:{},
        houseList:{},
        page:1,
      }
    },
    created(){
      this.getAdviserWebsite();
    },
    methods:{
      //点击加载更多
      loadMore(){
      this.page += 1;
        adviserWebsite(this.$route.params.id,this.page).then(res=>{
          console.log(res);
          // this.houseList = res.data.on_sale;
          this.houseList.data = [...this.houseList.data, ...res.data.on_sale.data];
        }).catch(err=>{
          console.log(err);
        })
      },
      // 切换展示房源
      changeMoreHouse(){
        this.borderBottom = 1;
      },
      //切换展示评价
      changeMoreEvaluate(){
        this.borderBottom = 2;
      },
      //获取经纪人主页数据
      getAdviserWebsite(){
        console.log(this.$route.params.id);
        this.page = 1;
        adviserWebsite(this.$route.params.id,this.page).then(res=>{
          console.log(res);
          this.$store.commit('setCircleOfFriendsTitle',res.data.account);
          this.$store.commit('setCircleOfFriendsDesc',res.data.company_id);
          this.adviserWebsiteData = res.data;
          this.houseList = res.data.on_sale;
        }).catch(err=>{
          console.log(err);
        })
      }
    },
    components: {ListContent, PraiseStars, TitleGoBack}
  }
</script>

<style scoped>
  .realtor_website .top_background {
    position: relative;
  }

  .realtor_website .top_background > div:nth-child(1) {
    background-color: #e6191e;
    height: 50px;
  }

  .realtor_website .top_background > div:nth-child(2) {
    background-color: #ffffff;
    height: 60px;
  }

  .realtor_website .top_background .top_content {
    position: absolute;
    margin: 10px;
    /*border: 1px solid #666666;*/
    box-shadow: 2px 2px 5px #eee;
    border-radius: 10px;
    width: calc(100% - 42px);
    top: 0;
    background-color: #ffffff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }

  .realtor_website .top_background .top_content .logo_name {
    display: flex;
    height: 60px;
    font-size: 0.7rem;
    color: #999;
  }

  .realtor_website .top_background .top_content .logo_name img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .realtor_website .top_background .top_content .logo_name .name {
    display: flex;
  }

  .realtor_website .top_background .top_content .logo_name .name > div:nth-child(1) {
    margin-right: 10px;
    font-size: 1rem;
    color: #333;
  }
  .realtor_website .top_background .top_content .logo_name span{
    color: #666;
    font-size: 0.7rem;
  }
  .realtor_website  .brief_introduction{
    display: flex;
    justify-content: space-between;
    padding: 0 20px 20px;
    text-align: center;
    font-size: 0.8rem;
    color: #999;
    border-bottom: 10px solid #eee;
  }
  .realtor_website .house_evaluate .house_evaluate_title{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #eee;
  }
  .realtor_website .house_evaluate .house_evaluate_title>div{
    font-size: 0.8rem;
    color: #666;
    text-align: center;
    /*width: 50%;*/
    padding: 10px 5px;
  }
  .realtor_website .house_evaluate .house_evaluate_title>div:nth-child(2){
    margin: 0 20px;
  }
  .border_bottom{
    border-bottom: 2px solid #e6191e;
  }
  .border_bottom_two{
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
    color: #999999;
  }
</style>
